<template>
  <div>
    <div class="top">
      <el-form
        :inline="true"
        ref="form"
        :model="form"
        label-width="180px"
        label-position="left"
      >
        <el-form-item label="订单编号" style="width: 250px">
          <el-input v-model="form.contacts" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item label="市" style="width: 250px">
          <el-input v-model="form.city" placeholder="市"></el-input>
        </el-form-item>
        <el-form-item label="单位" style="width: 250px">
          <el-input v-model="form.Company" placeholder="单位"></el-input>
        </el-form-item>

        <el-form-item label="区" style="width: 250px">
          <el-input v-model="form.area" placeholder="区"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="exportExcel('订单列表')"
        >导出到excel</el-button
      >
      <el-button type="primary" @click="queryInfo">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="table">
      <el-tabs v-model="activeName">
        <el-tab-pane label="未审核" name="first"></el-tab-pane>
        <el-tab-pane label="已支付" name="second"></el-tab-pane>
        <el-tab-pane label="未支付" name="third"></el-tab-pane>
        <el-tab-pane label="未通过" name="fourth"></el-tab-pane>
        <el-tab-pane label="审核完成" name="five"></el-tab-pane>
      </el-tabs>
      <el-table ref="report-table" :data="infoList1.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
        <el-table-column align="center" prop="Sociai_Credit" label="订单编号">
        </el-table-column>
        <el-table-column align="center" prop="Company" label="单位">
        </el-table-column>
        <el-table-column align="center" prop="Sales_name" label="姓名">
        </el-table-column>
        <el-table-column align="center" prop="" label="客户级别">
          大客户
        </el-table-column>
        <el-table-column align="center" prop="inOutDate" label="创建时间">
        </el-table-column>
        <el-table-column align="center" prop="number" label="数量(张)">
        </el-table-column>
        <el-table-column align="center" label="单价(元)"> 100 </el-table-column>
        <el-table-column align="center" prop="figure" label="金额">
        </el-table-column>
        <el-table-column align="center" label="支付状态">
          <template slot-scope="scope">
            <div v-if="scope.row.inOrOut == 1">未支付</div>
            <div v-else-if="scope.row.inOrOut == 0">已支付</div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作"> </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="infoList1.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      activeName: "second",
      form: {
        contacts: "",
        Company: "",
        city: "",
        area: "",
      },
      infoList: [
        {
          Account_status: false,
          Business_license: "",
          Company: "",
          Sales_name: "",
          Sociai_Credit: "",

          figure: 0,
          inOrOut: 3,
          inOutDate: 0,
          inOutInfo: "",

          area: "",
          city: "",
          contactsName: "",
          enterprise: "",
          identity_card: "",
          industry: "",
          password: "",
          phone: "",
          province: "",
          sales_calls: "",
          sales_number: 0,
          timer: 0,
          _id: "",
          number: 0,
        },
      ],
      infoList1: [],
      ListC: [],
      listWallet: [],
    };
  },
  created() {
    this.getInfo();
    this.changeList();
  },
  methods: {
    getInfo() {
      axios
        .get("http://47.108.201.43:3000/api/getAllKeyAccounts")
        .then((res) => {
          console.log(res.data);
          this.ListC = res.data.data;
          for (let i = 0; i < this.ListC.length; i++) {
            this.listWallet = this.ListC[i].Wallet_details;
            if (this.listWallet != [] && this.listWallet != null) {
              for (let s = 0; s < this.listWallet.length; s++) {
                var list = {
                  Account_status: this.ListC[i].Account_status,
                  Business_license: this.ListC[i].Business_license,
                  Sales_name: this.ListC[i].Sales_name,
                  Company: this.ListC[i].Company,
                  Sociai_Credit: this.ListC[i].Sociai_Credit,
                  figure: this.ListC[i].Wallet_details[s].figure,
                  inOrOut: this.ListC[i].Wallet_details[s].inOrOut,
                  inOutDate: this.ListC[i].Wallet_details[s].inOutDate,
                  inOutInfo: this.ListC[i].Wallet_details[s].inOutInfo,
                  area: this.ListC[i].area,
                  city: this.ListC[i].city,
                  contactsName: this.ListC[i].contactsName,
                  enterprise: this.ListC[i].enterprise,
                  identity_card: this.ListC[i].identity_card,
                  industry: this.ListC[i].industry,
                  password: this.ListC[i].password,
                  phone: this.ListC[i].phone,
                  province: this.ListC[i].province,
                  sales_calls: this.ListC[i].sales_calls,
                  sales_number: this.ListC[i].sales_number,
                  timer: this.ListC[i].timer,
                  _id: this.ListC[i]._id,
                  number: Math.ceil(
                    this.ListC[i].Wallet_details[s].figure / 100
                  ),
                };
                this.infoList.push(list);
              }
            } else {
              var list1 = {
                Account_status: this.ListC[i].Account_status,
                Business_license: this.ListC[i].Business_license,
                Sales_name: this.ListC[i].Sales_name,
                Company: this.ListC[i].Company,
                Sociai_Credit: this.ListC[i].Sociai_Credit,
                area: this.ListC[i].area,
                city: this.ListC[i].city,
                contactsName: this.ListC[i].contactsName,
                enterprise: this.ListC[i].enterprise,
                identity_card: this.ListC[i].identity_card,
                industry: this.ListC[i].industry,
                password: this.ListC[i].password,
                phone: this.ListC[i].phone,
                province: this.ListC[i].province,
                sales_calls: this.ListC[i].sales_calls,
                sales_number: this.ListC[i].sales_number,
                timer: this.ListC[i].timer,
                _id: this.ListC[i]._id,
                number: 0,
                figure: 0,
              };
              this.infoList.push(list1);
            }
          }
          this.changeList();
        });
    },
    changeList() {
      var name = this.activeName;
      if (name == "first") {
        for (let i = 0; i < this.infoList.length; i++) {
          if (this.infoList[i].Account_status == false) {
            this.infoList1.push(this.infoList[i]);
          }
        }
      } else if (name == "second") {
        for (let i = 0; i < this.infoList.length; i++) {
          if (this.infoList[i].inOrOut == 0) {
            this.infoList1.push(this.infoList[i]);
          }
        }
      } else if (name == "third") {
        for (let i = 0; i < this.infoList.length; i++) {
          if (this.infoList[i].inOrOut == 1) {
            this.infoList1.push(this.infoList[i]);
          }
        }
      } else if (name == "fourth") {
        for (let i = 0; i < this.infoList.length; i++) {
          if (this.infoList[i].inOrOut == 3) {
            this.infoList1.push(this.infoList[i]);
          }
        }
      } else if (name == "five") {
        for (let i = 0; i < this.infoList.length; i++) {
          if (this.infoList[i].Account_status) {
            this.infoList1.push(this.infoList[i]);
          }
        }
      }
    },
    queryInfo() {
      if (
        this.form.contacts == "" ||
        this.form.Company == "" ||
        this.form.area == "" ||
        this.form.city == ""
      ) {
        this.$message({
          message: "参数不能为空！",
          type: "error",
        });
      } else {
        axios
          .post("http://47.108.201.43:3000/api/queryAllKeyAccounts", {
            contacts: this.form.contacts,
            area: this.form.area,
            city: this.form.city,
            Company: this.form.Company,
          })
          .then((res) => {
            console.log(res);
          });
      }
    },
    reset() {
      (this.form.Company = ""),
        (this.form.city = ""),
        (this.form.area = ""),
        (this.form.contacts = "");
    },
    exportExcel(excelName) {
      //excelName --设置导出的excel名称
      //report-table --对应的要导出的el-table的ref名称
      try {
        const $e = this.$refs["report-table"].$el;
        // 如果表格加了fixed属性，则导出的文件会生产两份一样的数据，所以可在这里判断一下
        let $table = $e.querySelector(".el-table__fixed");
        if (!$table) {
          $table = $e;
        }
        // 为了返回单元格原始字符串，设置{ raw: true }
        const wb = XLSX.utils.table_to_book($table, { raw: true });
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${excelName}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.error(e);
      }
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
  },
  watch: {
    activeName() {
      this.infoList1 = [];
      this.changeList();
    },
  },
};
</script>
<style scoped>
.top {
  margin-top: 15px;
  margin-left: 15px;
}
.table {
  margin: 10px;
}
.demo-form-inline {
  float: left;
}
</style>